<template>
  <div class="CodeHighlightjsindex">
    <pre class="hljs">
      <code :class="[language]" v-html="showCode" ref="codeRef"/>
      <b class="name">{{ showLanguage }}</b>
    </pre>
    <div class="line-numbers-rows" :style="linNumberStyle">
      <template v-for="(item,index) in lineNumber">
              <span class="row-number-item" :key="'lineNumber' + index">
        {{ item }}
      </span><br v-if="index !== lineNumber"/>
      </template>
    </div>
    <el-button
      icon="el-icon-copy-document"
      ref="buttonRef"
      type="primary"
      v-click-copy="code"
      circle
      class="copy-button"/>
  </div>
</template>

<script>
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-dark.css";
import {ClickCopy} from "../../directive/ClickCopy/index";
import typeOfUtils from "../../utils/type-of-utils";
import htmlElementUtils from "../../utils/htmlElementUtils";
export default {
  name: "CodeHighlightjs",
  directives:{
    ClickCopy,
  },
  props:{
    language:{
      type:String,
      default: 'java'
    },
    code:{
      type:String,
      default: '默认值'
    }
  },
  computed:{
    lineNumber(){
      return this.code.split('\n').length
    },
    showLanguage(){
      if (this.language.toLowerCase() === 'javascript') {
        return 'js'
      }
      return this.language
    },
    showCode(){
      return hljs.highlight(this.language, this.code, true).value;
    }
  },
  data(){
    return{
      linNumberStyle:{
        fontSize: '13.6px',
        fontFamily: 'source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace',
        lineHeight: '19.04px'
      }
    }
  },
  mounted(){
    this.$nextTick(() => {
      this.linNumberStyle = this.getLinNumberStyle()
    })
  },
  methods:{
    getLinNumberStyle() {
      if(typeOfUtils.isEmpty(this.$refs.codeRef)){
        return {}
      }
      const fontSize = htmlElementUtils.getStyle(this.$refs.codeRef, 'font-size')
      const fontFamily = htmlElementUtils.getStyle(this.$refs.codeRef, 'font-family')
      const lineHeight = htmlElementUtils.getStyle(this.$refs.codeRef, 'line-height')
      return {
        fontSize,
        fontFamily,
        lineHeight
      }
    }
  }
}
</script>

<style scoped lang="scss">
.CodeHighlightjsindex {
  text-align: center;
  position: relative;

  .hljs {
    text-align: left;
    padding: 7px 2px 7px 40px;

    code {
      display: block;
      margin: 0 8px;
    }

    .name {
      position: absolute;
      top: 8px;
      right: 8px;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.4);
    }
  }

  .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 21px;
    bottom: 7px;
    left: 0;
    width: 40px;
    border-right: 1px solid rgba(0, 0, 0, 0.66);
    user-select: none;

    .row-number-item {
      color: #409EFF;
      text-align: center;
      width: 100%;
      pointer-events: none;
    }
  }

  .copy-button {
    position: absolute;
    bottom: 8px;
    right: 8px;
  }
}
</style>
